<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .switch {
            width: 500px;
            height: 250px;
            border: 30px solid #666;
            border-radius: 155px;
            position: relative;
            transition: 500ms cubic-bezier(0.75,-0.37, 0.49, 1.71);
        }
        .switch.on {
            background: rgb(19, 206, 102);
        }
        .switch.off {
            background: rgb(255, 73, 73);
        }
        .inner-btn {
            width: 230px;
            height: 230px;
            border-radius: 9999px;
            box-shadow: inset 0 0 20px black;
            position: absolute;
            top: 10px;
            transition: 200ms ease;
            background: #fff;
        }
        .inner-btn.on {
            left: calc(100% - 10px - 230px);
        }
        .inner-btn.off {
            left: 10px;
        }
    </style>
</head>
<body>
    <div class="switch off">
        <div class="inner-btn off"></div>
    </div>

    <script>

        var switchContainer = document.querySelector('.switch');
        var innerBtn = document.querySelector('.inner-btn');
        var flag = false;

        switchContainer.onclick = function () {
            switchContainer.setAttribute('class', 'switch ' + (!flag ? 'on' : 'off'));
            innerBtn.setAttribute('class', 'inner-btn ' + (!flag ? 'on' : 'off'));
            flag = !flag;
        };

    </script>
</body>
</html>